// 函数组件没有生命周期
import { group } from "console";
import { Component, ReactNode } from "react";
import Child from "./Child";
type Istate={
    name:string
}
class Praent extends Component<any,Istate>{
    state={
        name:'无心'
    }

    // ******钩子函数的执行顺序和书写顺序无关******//

    // 新老钩子不能放一起使用
    // componentWillMount(): void {
    //     // 组件即将挂载，组件初始化时执行一次，后续更新不回触发
    //     console.group('Praent的componentWillMount')
    //     console.log('Praent的componentWillMount');
    //     console.log(this.state.name);
    //     this.setState({
    //         name:'123'
    //     })
    //     console.groupEnd()
    // }

    handleClick=(arg:any)=>{
        // console.log(arg);
        this.setState({
            name:'456'
        })
    }
    render(): ReactNode {
        // 在这里会进行diff算法和更新虚拟dom
        // 首先初始化时会执行一次，更新的时候会再次触发
        // render中不能用this.setState直接变更状态，会死循环
        console.group('Praent的render')
        console.log('Praent的render');
        console.groupEnd()
        return(
            <fieldset>
                <legend>父组件</legend>
                <h1>{this.state.name}</h1>
                <button onClick={()=>{
                    this.handleClick(999)
                }}>点击</button>
                <Child name={this.state.name}/>
            </fieldset>
        )
    }
    static getDerivedStateFromProps(nextProps:Readonly<any>,nextState:Readonly<Istate>):Object|null{
        // 返回的这个对象，会作为组件的新的状态
        // 如果没有可以返回null
        return{
            name:'789'
        }
    }

    componentDidMount(): void {
        // 组件挂载，虚拟dom的结构已经加载到root中，变成了真实dom
        // 初始化时只执行一次
        console.group('Praent的componentDidMount')
        console.log('Praent的componentDidMount');
        console.groupEnd()
    }

    // 性能优化
    shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<Istate>, nextContext: any): boolean {
        // 组件接收新的state或者props时调用
        if(nextState.name===this.state.name){
            return false
        }
        return true
    }

    // 组件即将更新
    // componentWillUpdate(nextProps: Readonly<any>, nextState: Readonly<Istate>, nextContext: any): void {
    //     console.group('Praent的componentWillUpdate')
    //     console.log('nextState',nextState);
    //     console.groupEnd()
    // }

    // 组件更新完成
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<Istate>, snapshot?: any): void {
        console.group('Praent的componentDidUpdate')
        console.log('prevState',prevState);
        console.groupEnd()
    }


}

export default Praent